<template>
    <el-card class="userCard">
        <el-tabs type="border-card">
            <el-tab-pane label="普通用户管理">
                <UserCard :userList="commonUser" @update="update" @search="search" />
            </el-tab-pane>
            <el-tab-pane label="交管用户管理">
                <UserCard :userList="trafficUser" @update="update" @search="search" />
            </el-tab-pane>
        </el-tabs>

    </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { getUserInfo } from '../../api/index'
import UserCard from './UserCard.vue'

const commonUser = ref([])
const trafficUser = ref([])
onMounted(async () => {
    console.log('开始加载')
    const [res_common, res_traffic] = await Promise.all([
        getUserInfo('common'),
        getUserInfo('traffic')
    ])
    console.log(res_common, res_traffic, '加载用户')
    commonUser.value = res_common.result
    trafficUser.value = res_traffic.result
})

const update = async () => {
    const [res_common, res_traffic] = await Promise.all([
        getUserInfo('common'),
        getUserInfo('traffic')
    ])
    commonUser.value = res_common.result
    trafficUser.value = res_traffic.result
}

const search = async (val) => {
    const [res_common, res_traffic] = await Promise.all([
        getUserInfo('common'),
        getUserInfo('traffic')
    ])
    commonUser.value = res_common.result.filter(item => item.username.includes(val))
    trafficUser.value = res_traffic.result.filter(item => item.username.includes(val))
}
</script>

<style lang="scss" scoped>
.userCard {
    width: 1000px;
    height: 680px;
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
}
</style>